我們這次來說vue的動畫效果，並用個簡單範例來說明。
首先我們要用動畫效果要先用transition標籤加入妳要做動畫的元素，
並用一個button onclick改變data值來啟用動畫。

        <button @click="show = !show">切換</button>
        <br>
        <transition>
            <div class="block" v-if="show"></div>
        </transition>

  data:()=>({
    show:false,
  }),

.block{
     width:100px;
     height:100px;
     background-color: red;
     margin: 0 auto;
}

在transition標籤生成時，會自動產生6的class來控制動畫的效果。
這六個分別為:

v-enter-active:定義進入動畫從無到有的效果

v-enter:當v-enter-active開始時會執行

v-enter-to:當v-enter結束時執行

v-leave-active:定義進入動畫從有到無的效果

v-leave:當v-leave-active開始時會執行

v-leave-to:當v-leave結束時執行
這樣說有點難理解，用個範例比較好懂:
一開始我們已經先做好了按鈕判斷和transition標籤，剩下只要在style裡新增6個class:

/* 按下按鈕後動畫效果所用時間 */
.v-enter-active {
  transition: 2s;
}
/* 按下按鈕時該動畫的起始值 */
/* opacity為控制指定區塊的透明度 */
.v-enter {
  opacity: 0;
}
/* 動畫結束時所呈現的樣子 */
.v-enter-to {
  opacity: 1;
}

/* 按下按鈕後動畫效果所用時間 */
.v-leave-active {
  transition: 2s;
}
/* 按下按鈕時該動畫的起始值 */
/* opacity為控制指定區塊的透明度 */
.v-leave{
    opacity: 1;
}
/* 動畫結束時所呈現的樣子 */
.v-leave-to{
    opacity: 0;
}

若想要自訂義class名稱，不想讓class等於v-開頭，可以在transition標籤裡加上name屬性，就可以改成你想要的class名稱了。

        <button @click="show=!show">切換</button>
        <br>
        <transition name="fake">
            <div class="block" v-if="show" ></div>
        </transition>

.fake-enter {
  opacity: 0;
}
.fake-enter-active {
  transition: 2s;
}
.fake-enter-to {
  opacity: 1;
}

.fake-leave{
    opacity: 1;
}
.fake-leave-active {
  transition: 2s;
}
.fake-leave-to{
    opacity: 0;
} 

各位可能會發現到transition裡只能控制一個標籤的動畫效果，若我們要讓多元素有動畫效果要把transition改成transition-group，
且子元素內都各要有一個唯一key值。

        <button @click="show=!show">切換</button>
        <br>
        <transition-group name="fake">
            <div class="block" key="block"  v-if="show" ></div>
            <div class="area" key="area" v-if="show" ></div>
        </transition-group>